{% extends "layout.html" %}
{% block body %}

<script>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }}
</script>



<div class="modal fade" id="addtype">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">增加分类</h4>
			</div>
			<div class="modal-body">
				<input class="form-control" id="newtype" type="text" value=""/>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" id="addnewtype">Add</button>
				<script>
$(function(){
		$("#addnewtype").click(function(){
			$.getJSON($SCRIPT_ROOT + '/link/addtype', 
				{a: $("#newtype").val()},
				function(){
				location.reload();
				});
			});
		})
				</script>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="addlink">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">增加分类</h4>
			</div>
			<div class="modal-body">

				<form class="form-horizontal" role="form">
					<div class="input-group input-group-lg">
						<span class="input-group-addon">链接</span>
						<input type="text" class="form-control" id="newlink">
					</div>
					<div class="input-group input-group-lg">
						<span class="input-group-addon">说明</span>
						<input type="text" class="form-control" id="linktext">
					</div>
				</form>



			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" id="addnewlink">Add</button>
				<script>
$(function(){
		$("#addnewlink").click(function(){
			$.getJSON($SCRIPT_ROOT + '/link/addlink', 
				{
a: $("#typetitle").text(),
b: $("#newlink").val(),
c: $("#linktext").val()


},
function(){
location.reload()
});
			});
		})
				</script>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->







<div class="hex hex-1">        
	<div class="inner">
		<h3 id="typetitle">{{ other.title }}</h3>
	</div>        
	<a href="{{ request.url_root  }}links/index"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>        
</div>

{% if request.path == "/links/index" %}
<div class="hex hex-2">        
	<div class="inner">
		<h3 id="addtype" >增加分类</h3>
	</div>           
	<a href="" data-toggle="modal" data-target="#addtype"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>        
</div>

{% for link in links %}
{% if link.hexid % 13 == 6 %}

<div class="hex hex-gap" style="background: {{ link.color }}">
	<div class="inner">

		<h3>{{link.item}}</h3>
	</div>
	<a href="{{ link.hyperlink }}" name="hva"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>	
</div>
{% else %}
<div class="hex" style="background: {{ link.color }}">
	<div class="inner">

		<h3>{{link.item}}</h3>	
	</div>
	<a href="{{ link.hyperlink }}" name="hva"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>	
</div>
{% endif %}
{% endfor %}

{% else %}


<div class="hex hex-3">        
	<div class="inner">
		<h3 id="addlink">增加链接</h3>
	</div>        
	<a href="" data-toggle="modal" data-target="#addlink"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>        
</div>


{% for link in links %}
{% if link.hexid % 13 == 6 %}

<div class="hex hex-gap" style="background: {{ link.color }}">
	<div class="inner">

		<h3>{{link.item}}</h3>
	</div>
	<a target="_blank" href="{{ link.hyperlink }}" name="hva"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>	
</div>
{% else %}
<div class="hex" style="background: {{ link.color }}">
	<div class="inner">

		<h3>{{link.item}}</h3>	
	</div>
	<a target="_blank" href="{{ link.hyperlink }}" name="hva"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>	
</div>
{% endif %}
{% endfor %}

{% endif %}


<script>
$(function(){
		$('a[name=hva]').mouseover(function(){
			var $hoveritem = $(this).siblings('.inner').children('h3').text();
			$('#hoveritem').text($hoveritem);
			});

		})


</script>
<br>



{% endblock %}
